<template>
    <!--为echarts准备一个具备大小的容器dom-->
    <div id="main" style="width: 1500px;height: 700px;"></div>
</template>
<script>
    import echarts from 'echarts'
    export default {
        name: 'CommitSum',
        methods:{
            drawPie(id){
                this.charts = echarts.init(document.getElementById(id))
                this.charts.setOption({
                    title: {
                        text: '用户平均阅读时长（秒）'
                    },
                    xAxis: {
                        type: 'category',
                        data: ['2019-03', '2019-04', '2019-05']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [17850, 14216, 19413],
                        type: 'line',
                        symbol: 'triangle',
                        symbolSize: 20,
                        lineStyle: {
                            color: 'red',
                            width: 4,
                            type: 'dashed'
                        },
                        itemStyle: {
                            borderWidth: 3,
                            borderColor: 'yellow',
                            color: 'blue'
                        }
                    }]
                })
            }
        },
        //调用
        mounted(){
            this.$nextTick(function() {
                this.drawPie('main')
            })
        }
    }
</script>
<style scoped>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
</style>
